<template>
	<view class="warp">
		<view class="mask" v-if='isMoreFunc' @click="hiddenMask">
			<view class="moreFunc">
				<text>加好友</text>
				<text>加好友</text>
			</view>
		</view>
		<view class="content">
			<view class="top">
				<!-- 搜索框 -->
				<uni-search-bar :radius="10" @confirm="search" placeholder="搜索" @input="input"></uni-search-bar>
				<!--  #ifdef  MP-WEIXIN -->
				<text class="iconfont" @click="showMask">&#xe629;</text>
				<!--  #endif -->
			</view>


			<scroll-view  scroll-y="true" class="list" @scrolltoupper="getRecentChat" >
				<view class="item" v-for="(other,index) in others" :key='other.roomId' @click="goDetail(other.roomId,other.uuid)">
					<view class="dot" v-if="other.unread">
						{{other.unread}}
					</view>
					<image :src="other.avat"></image>
					<view class="cont">
						<text>{{other.userName}}</text>
						<text>{{other.lastMsg.uuid===user.uuid?user.userName:other.userName}}:{{other.lastMsg.msg}}</text>
					</view>
					<text class="date">{{other.lastMsg.fromNowtime}}</text>
				</view>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import uniSearchBar from '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue'
	import util from '../../utils/index.js'
	export default {
		components: {
			uniSearchBar
		},
		data() {
			return {
				searchText: '',
				isMoreFunc: false,
				others:[],
				user:{}
			}
		},
		onLoad() {
			let {uuid} = uni.getStorageSync('user')
			// 未登录去登录页面
			if (!uuid) uni.navigateTo({
				url: '../login/login'
			})
			util.myRequest({
				url: '/getUserName',
				data: {
					uuid
				}
			}).then(res=>{
				this.user=res
				// 查询是否有人加我
				return util.myRequest({
					url:'/getAddFriend',
					data: {
						uuid
					}
				})
			}).then(res=>{
				this.$store.commit('addfrinedSum',res.length)
			})
		},
		onNavigationBarButtonTap(e) {
			if (e.text !== '&nbsp') this.isMoreFunc = !this.isMoreFunc
		},
		onShow() {
			this.getRecentChat()
			// 注：只有连接正常打开中 ，才能正常收到消息
			uni.onSocketMessage(res => {
				let newMsg=JSON.parse(res.data)
				if(newMsg.type==='addfriend'){
					this.$store.commit('addfrinedSumAdd')
				}else{
					let thatChat=this.others.find(item=>item.roomId===newMsg.roomId)
					thatChat.unread+=1
					thatChat.lastMsg={
						time:newMsg.time,
						uuid:newMsg.uuid,
						msg:newMsg.msg,
						type:newMsg.type,
						fromNowtime:this.$moment(newMsg.time).fromNow(),
					}
					switch(newMsg.type){
						case 'img':
						thatChat.lastMsg.msg='[图片]'
						break;
						case 'video':
						thatChat.lastMsg.msg='[语言]'
						break;
					}
					this.$store.commit('unreadSumAdd')
				}
			
			});
		},
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
			this.getRecentChat()
		},
		methods: {
			getRecentChat(){
				let {
					uuid
				} = uni.getStorageSync('user')
				util.myRequest({
					url: '/recentChat',
					data: {
						uuid
					}
				}).then(res=>{
					let others=[]
					res.forEach(item=>{
						let obj=item.accounts.find(it=>it.uuid!==uuid)
						let lastMsg=item.messages.slice(-1)[0]
						lastMsg.fromNowtime=this.$moment(lastMsg.time).fromNow()
						switch(lastMsg.type){
							case 'img':
							lastMsg.msg='[图片]'
							break;
							case 'video':
							lastMsg.msg='[语音]'
							break;
						}
						obj.lastMsg=lastMsg
						obj.roomId=item.roomId
						let unreadIndex=item.unreads[0].unread.findIndex(item=>item.uuid===uuid)
						if(unreadIndex===-1){
							obj.unread=item.messages.filter(item=>item.uuid!==uuid).length
						}else{
							let unreadTime=item.unreads[0].unread[unreadIndex].time
							obj.unread=item.messages.filter(item=>item.time>unreadTime).filter(item=>item.uuid!==uuid).length
						}
						others.push(obj)
					})
					this.others=others
					try{
						let unreadSum=others.map(item=>item.unread).reduce((a,b)=>a+b)
						this.$store.commit('unreadSum',unreadSum)
					}catch(e){
						others[0]&&this.$store.commit('unreadSum',others[0].unread?others[0].unread:0)
					}
						
				})
			},
			goDetail(roomId,uuid){
				uni.navigateTo({
					url:'../chat/chat?roomId='+roomId+'&uuid='+uuid
				})
			},
			search() {
				console.log('search')
			},
			hiddenMask() {
				console.log('hiddenMask')
				this.isMoreFunc = false
			},
			showMask() {
				console.log('showMask')
				this.isMoreFunc = true
			},
			input(e) {
				this.searchText = e.value
			}
		},
	}
</script>

<style>
	.mask {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: auto;
		z-index: 999;
	}

	.mask>.moreFunc {
		position: absolute;
		top: 95upx;
		right: 25upx;
		width: 293upx;
		display: flex;
		flex-direction: column;
	}

	.mask>.moreFunc>text {
		line-height: 100upx;
		border: 1px solid #ccc;
		background-color: #4c4c4c;
		text-align: center;
		color: #fff;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative;
	}

	.content>.top {
		display: flex;
		align-items: center;
	}

	.content>.top uni-search-bar,
	.uni-searchbar {
		flex: 1;
	}

	.content>.top>text {
		font-size: 53upx;
		margin-right: 20upx;
	}

	.content>.list {
		flex-grow: 1;
	}

	.content>.list .item {
		padding: 30upx 20upx;
		display: flex;
		position: relative;
		border: 1px solid #e4e4e4;
	}
	.content>.list .item>image {
		border-radius: 8upx;
		width: 88upx;
		height: 88upx;
	}

	.content>.list .item>.dot {
		border-radius: 50%;
		background-color: #fa5150;
		color: #fff;
		font-size: 17upx;
		text-align: center;
		width: 32upx;
		line-height: 32upx;
		position: absolute;
		left: 95upx;
		top:10upx;
	}

	.content>.list .item>.cont {
		display: flex;
		font-size: 28uxp;
		color: #3f5784;
		margin-left: 20upx;
		flex-direction: column;
		justify-content: space-between;
	}

	.content>.list .item>.cont>text:nth-child(2) {
		color: #888;
		font-size: 24upx;
		width: 555upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.content>.list .item>.date {
		font-size: 20upx;
		color: #999;
		position: absolute;
		top: 20upx;
		right: 30upx;
	}
</style>
